import { Element } from "./element";
const ATTRS = 'ATTRS'
const TEXT = 'TEXT'
const REMOVE = 'REMOVE'
const REPLACE = 'REPLACE'
const CREATE_NODE = 'CREATE_NODE' // 新增节点(标签节点、文本节点)
const CREATETAGNODE = 'CREATETAGNODE' // 新增标签节点
const CREATETEXTNODE = 'CREATETEXTNODE' // 新增文本节点
let INDEX = 0 // 全局的遍历节点序号

function diff(oldTree, newTree) {
  let patches = {}
  let index = 0
  // 递归树，比较后的结果放到补丁包里
  treeWalker(oldTree, newTree, index, patches)

  return patches
}

function isString(node) {
  return Object.prototype.toString.call(node) === '[object String]'
}

// 比较属性是否更改
function diffAttr(oldAttrs, newAttrs) {
  let patch = {}
  for (const key in oldAttrs) {
    // 如果新属性里面没有，那么属性值就是 undefined
    if (oldAttrs[key] !== newAttrs[key] && newAttrs[key]) {
      patch[key] = newAttrs[key]
    }
  }
  for (const key in newAttrs) {
    if (!oldAttrs.hasOwnProperty(key)) {
      patch[key] = newAttrs[key]
    }
  }
  return patch
}

// 比较子节点
function diffChildren(oldChildren, newChildren, patches) {
  console.log(oldChildren, newChildren);
  /* [...oldChildren].forEach((child, i) => {
    treeWalker(child, newChildren[i], ++INDEX, patches)
  })

  // 新增节点统一处理
  let newAddNode = newChildren.slice(oldChildren.length);
  // console.log('newAddNode', newAddNode);
  if (newAddNode.length > 0) {
    treeWalker(null, newAddNode, ++INDEX, patches);
  } */


  if (oldChildren.length >= newChildren.length) {
    [...oldChildren].forEach((child, i) => {
      treeWalker(child, newChildren[i], ++INDEX, patches)
    })
  } else {
    console.log('aa', oldChildren, newChildren);
    [...oldChildren].forEach((child, i) => {
      treeWalker(child, newChildren[i], ++INDEX, patches)
    })

    // 新增节点统一处理
    let newAddNode = newChildren.slice(oldChildren.length);
    // console.log('newAddNode', newAddNode);
    if (newAddNode.length > 0) {
      treeWalker(null, newAddNode, ++INDEX, patches);
    }


    /* // 新增节点统一处理
    let newAddNode = newChildren.slice(oldChildren.length);
    console.log('newAddNode', newAddNode);
    treeWalker(null, newAddNode, ++INDEX, patches);
    [...newChildren].forEach((child, i) => {
      treeWalker(oldChildren[i], child, ++INDEX, patches)
    }) */
  }
}

function treeWalker(oldNode, newNode, index, patches) {
  // console.log(oldNode, newNode, index);
  // 每个元素的补丁对象
  let curPatches = []
  if (!oldNode) {
    // 新增节点
    // console.log('newNode===', newNode);
    if (Array.isArray(newNode)) {
      // 尾部追加的全部节点
      curPatches.push({ type: CREATE_NODE, newNode });
    } else if (newNode instanceof Element) {
      curPatches.push({ type: CREATETAGNODE, newNode })
    } else {
      curPatches.push({ type: CREATETEXTNODE, newNode })
    }
  } else if (!newNode) {
    curPatches.push({ type: REMOVE, index })
  } else if (isString(oldNode) && isString(newNode)) {
    // console.log(oldNode, newNode);
    if (oldNode !== newNode) {
      curPatches.push({ type: TEXT, text: newNode })
    }
  } else if (oldNode.type === newNode.type) {
    let attrs = diffAttr(oldNode.props, newNode.props)
    if (Object.keys(attrs).length > 0) {
      curPatches.push({ type: ATTRS, attrs })
    }
    // 处理子节点
    diffChildren(oldNode.children, newNode.children, patches)
  } else {
    // 节点被替换
    curPatches.push({ type: REPLACE, newNode })
  }

  // 如果有补丁， 把元素和补丁对应起来，放到大补丁包里
  if (curPatches.length > 0) {
    patches[index] = curPatches
  }
}

export default diff